<template>
  <div>
    <h2>商品显示</h2>
    <input type="text" v-model="keyword"><button @click="search">搜索</button>
    <table border="1" cellspacing="0">
      <colgroup span="6" width="150px"></colgroup>
      <tr>
        <td>图片</td>
        <td>id</td>
        <td>名称</td>
        <td>价格</td>
        <td>分类</td>
        <td>操作</td>
      </tr>

      <tr v-for="(i,k) in goods" :key="k">
        <td>
          <img :src="baseUrl+i.img" />
        </td>
        <td>{{i.id}}</td>
        <td>{{i.name}}</td>
        <td>{{i.price}}</td>
        <td>{{i.catename}}</td>
        <td>
            <input type="number" v-model="num">
          <button @click="order(i.id)">购买</button>
        </td>
      </tr>
    </table>
    <button v-if="previous" @click="pagx(p-1)">上一页</button>
    <button v-for="i in page" :key="i" @click="pagx(i)" :class="i==p?'active':''">{{i}}</button>
    <button v-if="next" @click="pagx(p+1)">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: "http://127.0.0.1:8000/static/",
      goods: [],
      p: 1,
      page: [],
      previous: false,
      next: false,
      keyword:"",
      num:1
    };
  },
  mounted() {
    this.common();
  },
  methods: {
    common() {
      this.axios({
        url: "http://127.0.0.1:8000/app03/goods/",
        method: "get",
        params: { p: this.p,keyword:this.keyword }
      }).then(res => {
        this.goods = res.data.data.data;
        this.page = res.data.data.page;
        this.previous = res.data.data.previous;
        this.next = res.data.data.next;
      });
    },
    pagx: function(p) {
      this.p = p;
      this.common();
    },
    search:function(){
        this.common();
    },
    order:function(goodid){
        this.$router.push({
            path:'/success',
            query:{"goodid":goodid,"num":this.num}
        })
    }
  }
};
</script>

<style>
img {
  width: 250px;
  height: 250px;
}
table {
  margin: 20px auto;
}
.active{
    background: hotpink;
    color: #fff;
}
</style>